<template>
  <div style="padding:30px;">

    <el-card class="box-card">

      <el-button class="kuandu" type="danger" @click="dialogVisible = true">新增模板</el-button>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="date"
          label="模板类型"
          width="180"
        />
        <el-table-column
          prop="name"
          label="运送类型"
          width="180"
        />
        <el-table-column
          prop="address"
          label="关联城市"
        />
        <el-table-column
          prop="address"
          label="首重"
        />
        <el-table-column
          prop="address"
          label="续重"
        />
        <el-table-column
          prop="lightThrowingCoefficient"
          label="轻抛系数"
        />
        <el-table-column
          prop="address"
          label="操作"
        />
      </el-table>

    </el-card>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form>
        <el-form-item label="模板类型">
          <el-select
            style="width: 450px;"
            placeholder="请选择活动区域"
          >
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" /></el-select>
        </el-form-item>

        <el-form-item label="模板类型">
          <el-select
            style="width: 450px;"
            placeholder="请选择活动区域"
          >
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" /></el-select>
        </el-form-item>

        <el-form-item label="模板类型">
          全国
        </el-form-item>

        <el-form-item label="首重价格">
          <el-input style="width: 450px;" />
        </el-form-item>

        <el-form-item label="续重价格">
          <el-input style="width: 450px;" />
        </el-form-item>

        <el-form-item label="轻抛系数">
          <el-input style="width: 450px;" />
        </el-form-item>
      </el-form>
      <div class="zuob">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>

    </el-dialog>
  </div>
</template>
<script>
import { carriages } from '@/api/table'
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false
    }
  },
  async created() {
    console.log('1测试')
    const res = await carriages()
    console.log(res.data.data)
    this.tableData = res.data.data
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>

<style>
 .box-card {
 width: 100%;
 height: 800px;
}
.kuandu{
  margin-bottom: 30px;
  width: 120px;
  background-color: #e15536 !important;
}
.zuob{
  margin-left: 200px;
}
</style>
